<script setup>
import {ref, reactive, computed} from 'vue'

  // ref 函数演示

  let count  = ref(0)
  let name   = ref('测试用户')

  //student
  let student = ref({
    name: '天外飞仙',
    age: 18,
    hobby: ['Watch TV', 'Learning', 'Play basketball']
  })
  let newHobbyIdx = 1

  function changeStudent() {
    student.value.name += '!'
    student.value.age  += 2
    student.value.hobby.push('New Hobby ' + newHobbyIdx++)
  }

  const latestHobby = computed(() => {
    return student.value.hobby[student.value.hobby.length -1]
  })

  // reactive 函数演示
  let emp = reactive({
    name: '元始人',
    age: 28,
    position: '市场部',
    others: {
      address: '月球南天门8024号',
      division: '环月分公司',
      titles: ['物理学教授', '高级研究员', '国家级专家']
    }
  })

  function chgEmp() {
    emp.name += '@'
    emp.age++
    emp.position += '~'
    emp.others.address += '#'
    emp.others.division += '%'
  }

  let titleIdx = 1

  function addTitle() {
    emp.others.titles.push('title-' + titleIdx++)
  }

  function updateTitle() {
    for(let i = 0; i < emp.others.titles.length; i++) {
      emp.others.titles[i] += '*'
    }
  }
</script>

<template>
  <h3>Vite + Vue3 基本用法 演示</h3>

  <hr>
  <div>
    <span>计数器测试 - 当前计数: {{count}}</span>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
  </div>

  <hr>
  <div>以下是使用ref包装对象数据的测试: (非响应式数据只能拿到初始值) {{newHobbyIdx}}</div>
  <div>*** Name is {{student.name}}</div>
  <div>*** Age is {{student.age}}</div>
  <div>*** Hobbies are {{student.hobby}}, &nbsp;&nbsp; <b>Latest Hobby:</b> {{latestHobby}}</div>
  <button @click="changeStudent">改变对象数据</button>
  <hr>

  <div>员工的具体信息如下:</div>
  <div class="indent">姓名: {{emp.name}}</div>
  <div class="indent">年龄: {{emp.age}}</div>
  <div class="indent">职位: {{emp.position}}</div>
  <button @click="chgEmp">修改员工信息</button>
  <br>
  <div>其他信息:</div>
  <div class="indent">办公地址: {{emp.others.address}}</div>
  <div class="indent">分公司: {{emp.others.division}}</div>
  <ul class="indent">职称: 
    <li v-for="(title, index) in emp.others.titles" :key="index">{{title}}{{index +1 === emp.others.titles.length ? '' : ' , '}}</li>
  </ul>
  <button @click="addTitle">增加职称</button>
  <button @click="updateTitle">修改职称</button>
  <hr>

  <p>
    Vue3 script setup 语法糖 (配合 vite 使用) 说明:<br>
    1. 属性和方法无需返回，直接使用<br>
    2. 组件自动注册<br>
    3. 组件数据传递(props和emits) -- 后续再演示<br>
    4. 获取 slots 和 attrs  -- 后续再演示<br>
    5. 对外暴露属性(defineExpose) -- 后续再演示<br>
    官方文档: <a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6-script-setup"><b>单文件组件
&lt;script setup&gt;</b></a>
  </p>
</template>

<style scoped>

button {
  margin-left: 10px;
}

ul li {
  display: inline;
}

</style>